import React, { Component } from 'react'
import {
    StyleSheet,
    View,
    ImageBackground,
    ScrollView,
    StatusBar,
    Image,
    Text,
    Linking
} from 'react-native'
import { observer, inject } from 'mobx-react'
import navigationhelper from 'src/components/navigationhelper'
import NavBar from "src/components/navBar";
import { deviceWidth, deviceHeight } from "../../../util";
import { Flex } from '@ant-design/react-native';
import Layer from "src/components/Layer";
import QrCodeView from './qrCodeView';
import TelNumView from './telNumView'



@inject('config', 'userAuth')
@observer
export default class ServiceCenter extends Component {
    constructor(props) {
        super(props);
        this.state = {

        };
    }


    cellViewOne = (titleUp, ttileDown) => {
        return (
            <Flex onPress={() => {
                Layer.showMsg('暂未开通')
            }} justify='start' style={{ backgroundColor: '#FAFAFA', flexDirection: 'row', borderRadius: 10, marginHorizontal: 15, paddingVertical: 10 }}>
                <Image style={{ marginLeft: 10, width: 54, height: 54 }} source={require('src/assets/kefu.png')}>
                </Image>
                <View style={{ marginLeft: 10, width: 1, height: 50, marginVertical: 5, backgroundColor: '#EDEDED' }} />
                <View style={styles.samllView}>
                    <Text style={styles.TextUp}>{titleUp}</Text>
                    <Text style={styles.TextDown}>{ttileDown}</Text>
                </View>
            </Flex>
        )

    }
    cellViewTwo = (titleUp, ttileDown) => {
        return (
            <Flex
                onPress={() => {
                    this.regModal.showOrDismiss(true)
                }}
                justify='start' style={styles.bigView}>
                <Image style={{ marginLeft: 10, width: 54, height: 54 }} source={require('src/assets/weixin.png')}>
                </Image>
                <View style={{ marginLeft: 10, width: 1, height: 50, marginVertical: 5, backgroundColor: '#EDEDED' }} />
                <View style={styles.samllView}>
                    <Text style={styles.TextUp}>{titleUp}</Text>
                    <Text style={styles.TextDown}>{ttileDown}</Text>
                </View>
            </Flex>
        )

    }

    cellViewThree = (titleUp, ttileDown) => {
        return (
            <Flex
                onPress={() => {
                    this.regModalTel.showOrDismiss(true)
                }}
                justify='start' style={styles.bigView}>
                <Image style={{ marginLeft: 10, width: 54, height: 54 }} source={require('src/assets/dianhua.png')}>
                </Image>
                <View style={{ marginLeft: 10, width: 1, height: 50, marginVertical: 5, backgroundColor: '#EDEDED' }} />
                <View style={styles.samllView}>
                    <Text style={styles.TextUp}>{titleUp}</Text>
                    <Text style={styles.TextDown}>{ttileDown}</Text>
                </View>
            </Flex>
        )
    }
    render() {

        const { customer } = this.props.config.config

        let tel = `tel:${customer.phone}`//电话

        return (
            <View style={{ flex: 1, backgroundColor: '#fff' }}>
                <NavBar
                    back={() => {
                        navigationhelper.goBack();
                    }}
                    title={"客服中心"}
                    leftText={"返回"}
                />
                <ScrollView>
                    <ImageBackground style={{ marginTop: 10, width: deviceWidth, height: 238 }} source={require('src/assets/kefuzhongxin.png')}>
                    </ImageBackground>
                    {this.cellViewOne('在线客服', '在线为您解答各种疑问')}
                    {this.cellViewTwo('官方微信', '识别二维码，关注官方微信')}
                    {this.cellViewThree('全国服务热线', 'TELL:4001883929')}

                </ScrollView>
                <QrCodeView
                    ref={i => this.regModal = i}
                    close={() => {
                        this.regModal.showOrDismiss(false)
                    }}
                    customer={customer}
                />

                <TelNumView
                    ref={i => this.regModalTel = i}
                    close={() => {
                        this.regModalTel.showOrDismiss(false)
                    }}
                    customer={customer}
                    callPhone={() => {
                        this.regModalTel.showOrDismiss(false)
                        Linking.canOpenURL(tel).then((supported) => {
                            if (!supported) {
                                Layer.showMsg('暂不支持')
                            } else {
                                return Linking.openURL(tel)
                            }
                        })
                    }} />

            </View>
        );
    }



}

const styles = StyleSheet.create({
    samllView: {
        flexDirection: 'column',
        paddingVertical: 10,
        marginLeft: 20,
    },
    TextUp: {
        color: '#2E2E2E',
        fontSize: 15,
    },
    TextDown: {
        marginTop: 10,
        color: '#8E8E93',
        fontSize: 13,
    },
    bigView: {
        marginTop: 20,
        backgroundColor: '#FAFAFA',
        flexDirection: 'row',
        borderRadius: 10,
        marginHorizontal: 15,
        paddingVertical: 10
    }

})